<template>
  <div id="homePage">
    <div class="h_heaer">
      <div>
        <div class="item1">今日收入</div>
        <div class="item2">200</div>
        <div class="item3">30.56 %</div>
        <div class="item4">
          <i class="element-icons el-icon-income-o" />
        </div>
      </div>
      <div>
        <div class="item1">今日换电</div>
        <div class="item2">2000</div>
        <div class="item3">30.56 %</div>
        <div class="item4">
          <i class="element-icons el-icon-dianping1" />
        </div>
      </div>
      <div>
        <div class="item1">今日新增换电站</div>
        <div class="item2">5</div>
        <div class="item3">30.56 %</div>
        <div class="item4">
          <i class="element-icons el-icon-peidianxiang-copy" />

        </div>
      </div>
      <div>
        <div class="item1">今日新增代理</div>
        <div class="item2">2</div>
        <div class="item3">30.56 %</div>
        <div class="item4">
          <i class="element-icons el-icon-jingxiaoshang" />
        </div>
      </div>
    </div>
    <div class="h_body">
      <div id="main1" />
      <div id="main2" />
      <div class="message" />
    </div>
    <div>
      <div id="main3" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'item'
        },

        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]
      },
      option2: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      },
      option3: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ]
      }
    }
  },
  mounted() {
    this.showmain()
  },
  methods: {
    showmain() {
      const mainchart = this.$echarts.init(document.querySelector('#main1'))
      mainchart.setOption(this.option, true)
      const mainchart2 = this.$echarts.init(document.querySelector('#main2'))
      mainchart2.setOption(this.option2, true)
      const mainchart3 = this.$echarts.init(document.querySelector('#main3'))
      mainchart3.setOption(this.option3, true)
    }
  }
}
</script>
<style lang='scss' scoped>
.h_heaer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  >div {
    width: 23%;
    height: 150px;
    min-width: 200px;
    border-radius: 10px;
    padding: 15px;
    color: #fff;
    position: relative;
  }
  >:nth-child(1){
    background: linear-gradient(to top right,#a0dfda,#67c4be)
  }
  >:nth-child(2){
    background: linear-gradient(to top right,#80b8f9,#4494f8)
  }
  >:nth-child(3){
    background: linear-gradient(to top right,#f5c29a,#eb8e5f)
  }
  >:nth-child(4){
    background: linear-gradient(to top right,#a7cdfb,#60a8f8)
  }
  .item2 {
    font-size: 25px;
    margin:10px 0;
    margin-left: 20px
  }
  .item3 {
    font-size: 35px;
    margin-left: 20px;
  }
  .item4 {
    position: absolute;
    top: 20px;
    right:20px;
    .element-icons {
      font-size: 60px;
    }
  }
}
.h_body {
  display: flex;
  flex-direction: row;
  #main1 {
    margin-top: 30px;
    width: 300px;
    height: 300px;
  }
  #main2 {
    margin-top: 30px;
    width: 40%;
    height: 300px;
  }
  .message{
    margin-top: 30px;
    width: calc(60vw - 450px);
    height: 300px;
    background-color: #ccc;
    border-radius: 10px;
  }
}
#main3 {
    margin-top: 30px;
    width: 100%;
    height: 300px;
  }

</style>
